<template>
  <div ref="jsonEditor" class="json-editor-wrapper"></div>
</template>
<script>
import Jsoneditor from 'jsoneditor';
import 'jsoneditor/dist/jsoneditor.min.css';

export default {
  name: 'JsoneditorViewer',
  props: {
    json: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      editorOptions: {
        mode: 'code',
        mainMenuBar: false,
        statusBar: false,
      },
    };
  },
  created() {},
  mounted() {
    const container = this.$refs['jsonEditor'];
    this.editor = new Jsoneditor(container, this.editorOptions);
    this.editor.set(this.json);
  },
  methods: {},
};
</script>
<style lang="less" scoped>
.json-editor-wrapper {
  height: calc(100vh - 220px) !important;
  box-sizing: border-box;
  padding: 15px;
  background: #fff;
  border-radius: 4px;
  /deep/ .jsoneditor {
    border: none;
    .ace-jsoneditor .ace_gutter {
      background: transparent;
    }
    .jsoneditor-statusbar {
      background: transparent;
    }
  }
}
</style>
